<template>
  <div class="team-manager-div">
    <template v-if="!createdTeam">
      <a-card :bordered="false" :loading="loading">
        <a-empty :description="false" :image-style="{ height: '500px', marginBottom: '-75px' }">
          <img slot="image" src="~@/assets/team-empty.png" alt="未创建团队" />
          <a-button type="primary" @click="createMyTeam"> 创建团队 </a-button>
        </a-empty>
      </a-card>
    </template>
    <template v-else>
      <a-card :bordered="false">
        <a-page-header
          style="border-bottom: 1px solid rgb(235, 237, 240)"
          :title="teamName"
          :sub-title="teamCreateTimeStr"
        >
          <template slot="extra">
            <a-button key="编辑信息" type="primary" @click="handleEditMyTeam"> 编辑信息 </a-button>
          </template>
        </a-page-header>

        <a-spin :spinning="listLoading">
          <ul class="member-list">
            <li
              class="member-itemview"
              v-for="item in doctorList"
              :key="item.dataId"
              @mouseenter="
                () => {
                  item.hover = true
                }
              "
              @mouseleave="
                () => {
                  item.hover = false
                }
              "
            >
              <img v-if="item.doctorAvatar !== null" :src="item.doctorAvatar" :alt="item.doctorName" />
              <a-avatar v-else :size="100" icon="user" :style="{ marginLeft: '1.5rem' }" />
              <span class="s1">{{ item.doctorName }}</span>
              <span class="s2">{{ item.doctorTypeName }}</span>
              <div :class="item.hover == false ? 'editview hide' : 'editview'">
                <a href="javascript:;" @click="handleEditDoctor(item)">编辑</a>
                <a href="javascript:;" @click="handleDeleteDoctor(item)">删除</a>
              </div>
            </li>
            <li class="member-itemview" @click="handleAddDoctor">
              <a-icon type="plus-circle" :style="{ fontSize: '72px', color: '#B1B1B1', cursor: 'pointer' }" />
            </li>
          </ul>
        </a-spin>
      </a-card>
    </template>

    <create-team-modal ref="createTeamModalForm" @ok="createTeamModalFormOk" />
    <team-doctor-modal ref="modifyTeamDoctorModalForm" @ok="modifyTeamDoctorModalFormOk" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { postAction, getAction } from '@/api/manage'
import CreateTeamModal from './modules/CreateTeamModal'
import TeamDoctorModal from './modules/TeamDoctorModal'

export default {
  name: 'TeamMembers',
  components: {
    CreateTeamModal,
    TeamDoctorModal
  },
  data() {
    return {
      loading: true,
      // doctorId: 10011078, // 新建测试，新建成功
      // doctorId: 10011051, // doctorId 通过当前登陆者的信息获取，当前id为暂时
      createdTeam: false,
      myTeamId: 0, // 如果该医生有团队则在初始化中获取，否则在新建团队后获取；在设置团队成员中被使用
      teamName: '',
      teamCreateTimeStr: '',
      teamCreateTime: '',
      listLoading: false,
      doctorList: []
    }
  },
  created() {
    this.handleGetDoctorTeam()
  },
  methods: {
    ...mapGetters(['doctorId']),
    createMyTeam() {
      this.$refs.createTeamModalForm.add({
        managerId: this.doctorId()
      })
      this.$refs.createTeamModalForm.title = '创建团队'
    },
    handleEditMyTeam() {
      if (this.myTeamId) {
        getAction('/201/03/2010304', { teamId: this.myTeamId }).then(res => {
          if (res.success) {
            this.$refs.createTeamModalForm.edit({
              dataId: res.result.dataId,
              name: res.result.name,
              managerName: res.result.managerName,
              description: res.result.description,
              managerId: res.result.managerId
            })
            this.$refs.createTeamModalForm.title = '编辑团队信息'
          }
        })
      } else {
        this.$message.error('未找到您的团队信息，请联系系统管理员')
      }
    },
    handleGetDoctorTeam() {
      this.loading = true
      console.log('Member.vue.handleGetDoctorTeam.doctorId ', this.doctorId())
      getAction('/201/03/2010301', { doctorId: this.doctorId() })
        .then(res => {
          if (res.success) {
            if (res.result != null && res.result.teamId) {
              this.createdTeam = true
              this.myTeamId = res.result.teamId
              this.teamCreateTime = res.result.teamCreateTime
              this.teamCreateTimeStr = '创建时间：' + res.result.teamCreateTime
              if (res.result.manager.doctorName) {
                this.teamName = res.result.teamName
              } else {
                this.teamName = '团队成员'
              }
              this.doctorList = res.result.teamDoctors
              const _this = this
              this.doctorList.map(function(item) {
                _this.$set(item, 'hover', false)
              })
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    createTeamModalFormOk() {
      this.handleGetDoctorTeam()
    },
    handleAddDoctor() {
      this.$refs.modifyTeamDoctorModalForm.add({
        teamId: this.myTeamId
      })
      this.$refs.modifyTeamDoctorModalForm.title = '新增团队成员'
    },
    handleEditDoctor(data) {
      this.$refs.modifyTeamDoctorModalForm.edit({
        doctorId: data.dataId,
        doctorName: data.doctorName,
        doctorPhone: data.doctorMobile,
        doctorType: data.doctorType
      })
      this.$refs.modifyTeamDoctorModalForm.title = '编辑团队成员'
    },
    handleDeleteDoctor(data) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: '真的要删除 ' + data.doctorName + ' 吗?',
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.listLoading = true
          postAction('/201/03/2010303', {
            doctorId: data.dataId,
            manageDoctorId: _this.doctorId(),
            teamId: _this.myTeamId
          })
            .then(res => {
              if (res.success) {
                _this.$message.success('团队成员删除成功')
              } else {
                _this.$message.warning(res.message)
              }
            })
            .finally(() => {
              _this.listLoading = false
              _this.handleGetDoctorTeam()
            })
        },
        onCancel() {
          console.log('Cancel')
        }
      })
    },
    modifyTeamDoctorModalFormOk() {
      this.handleGetDoctorTeam()
    }
  }
}
</script>

<style scoped>
ul,
li {
  list-style: none;
}
.member-list {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
}
.member-itemview {
  display: flex;
  flex-direction: column;
  margin-right: 40px;
  text-align: center;
  position: relative;
  justify-content: center;
  min-width: 150px;
  padding: 20px 0;
}
.member-itemview img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
}
.member-itemview .s1 {
  font-size: 18px;
  color: #333;
  margin-top: 20px;
}
.member-itemview .s2 {
  font-size: 18px;
  color: #555;
  margin-top: 10px;
}
.editview.hide {
  display: none;
}
.editview {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.editview a {
  font-size: 14px;
  background: #fff;
  color: #333;
  width: 100px;
  height: 30px;
  border-radius: 20px;
  line-height: 30px;
  margin: 5px 0;
}
.editview a:hover {
  color: #f5222d;
}
</style>

